<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="https://raw.githubusercontent.com/OpenAsar/gluon/main/assets/logo.png">
    <title>Gluworld</title>
  </head>
  <body>
    <h1 id="main">
      Gluon <code id="gluon_version"></code> <br>
      <span id="built_with">built with <code id="builder"></code> <br></span>
      running on <code id="product"></code>
    </h1>

    <div id="versions">
      <h2>
        <span id="engine_name"></span> <br>
        <code id="browser_version"></code> <br>
        <p><span id="js_engine_name"></span> <code id="browser_v8"></code></p>
      </h2>

      <h2 id="build">
        Build Size <br>
        <code id="build_size"></code>
      </h2>

      <h2>
        Node <br>
        <code id="node_version"></code> <br>
        <p>V8 <code id="node_v8"></code></p>
      </h2>
    </div>

    <style>
      @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900');

      html, body {
        background: #101418;
        color: #fff;
        font-family: Inter, sans-serif;

        margin: 0;
        width: 100%;
        height: 100%;
      }

      body {
        box-sizing: border-box;
        padding: 5vw 5vh;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }

      h1, h2, code {
        text-align: center;
        margin: 0;
      }

      h1 {
        font-weight: 900;
        font-size: 34px;
      }

      h1 > code, h2 > p > code {
        margin-left: 8px;
      }

      h2 {
        font-weight: 800;
        font-size: 28px;
      }

      h2 > p, h2 > p > code {
        font-weight: 600;
        font-size: 18px;
        color: #bbb;
      }

      code {
        font-size: 100%;
        font-family: Fira Code;
        color: #ddd;
      }

      #versions {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
      }

      #build, #built_with {
        display: none;
      }
    </style>

    <script> (async () => {
      await new Promise(res => {
        const check = () => {
          if (!window.Gluon) return setTimeout(check, 100);
          res();
        };

        check();
      });

      browser_version.textContent = Gluon.versions.browser;
      node_version.textContent = `${Gluon.versions.embedded.node ? 'Embed' : 'System'} ${Gluon.versions.node}`;
      gluon_version.textContent = Gluon.versions.gluon;
      builder.textContent = Gluon.versions.builder;
      product.textContent = Gluon.versions.product;
      node_v8.textContent = Gluon.versions.js.node;
      browser_v8.textContent = Gluon.versions.js.browser;

      if (Gluon.versions.builder !== 'nothing') {
        build.style.display = 'block';
        built_with.style.display = 'block';
        // main.innerHTML = main.innerHTML.replace(`built with <code id="builder">nothing</code> <br>`, '');
      }

      engine_name.textContent = Gluon.versions.browserType === 'firefox' ? 'Firefox' : 'Chromium';
      js_engine_name.textContent = Gluon.versions.browserType === 'firefox' ? 'SpiderMonkey' : 'V8';

      Gluon.ipc.on('build size', size => {
        const kb = size / 1024;
        const mb = kb / 1024;

        build_size.textContent = mb > 0.1 ? `${mb.toFixed(2)}MB` : `${kb.toFixed(0)}KB`;
      });
    })();
    </script>
  </body>
</html>